import { LoadingOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
import { publish, subscribe, unsubscribe } from "pubsub-js";
import { useCallback, useEffect, useState } from "react";
import { connect } from "react-redux";

import {
    message_user_message,
    message_user_txt,
    message_info_tip,
} from './index.module.css'

import { sendDone, sendFail } from '../../event-type';
import { postMessageToGroup } from "../../assets/js/api";

function NormalMessage(props) {

    const { user, currentRoom } = props;
    const { message_id, message_content, messageStatus, destroySelf } = props;

    const [status, setStatus] = useState(messageStatus ?? 'success');// 没有状态码则代表从后端发送,为以发送成功的消息

    const sendDoneHandle = useCallback((event, data) => {
        if (data.message_id === message_id) {
            destroySelf();
            setStatus('success');
        }
    }, [message_id, destroySelf]);
    const sendFailHandle = useCallback((event, data) => {
        if (data.message_id === message_id) {
            setStatus('fail');
        }
    }, [message_id]);

    useEffect(() => {
        if (status === 'success') return;
        const sendDoneToken = subscribe(sendDone, sendDoneHandle);
        const sendFailToken = subscribe(sendFail, sendFailHandle);

        return () => {
            unsubscribe(sendDoneToken);
            unsubscribe(sendFailToken);
        }
    }, [status, sendDoneHandle, sendFailHandle]);


    function tryAgain() {
        // 发送失败重新发送
        setStatus('loading');
        postMessageToGroup({user_id: user.id, group_id: currentRoom, msg: message_content})
        .then(res => {
            const { code } = res.data;
            if (code === 1) {
                // 发送成功,清除loading提示
                publish(sendDone, {message_id});
                // 这里publish发布sendDone自身监听不到,需要手动调用
                sendDoneHandle(sendDone, {message_id});
                setStatus('success');
            } else {
                // 发送失败,出现红色感叹号,点击重新发送
                publish(sendFail, {message_id});
                // 这里publish发布sendFail自身监听不到,需要手动调用
                sendFailHandle(sendFail, {message_id});
                setStatus('fail');
            }
        })
        .catch(err => {
            console.log(err);
            publish(sendFail, {message_id});
            setStatus('fail');
        });
    }



    return (
        <>
            <span className={message_user_message}>
                {/* 保证换行和空格显示 */}
                <pre className={message_user_txt}>{message_content}</pre>
            </span>
            <div 
                className={message_info_tip} 
                style={{color: status === 'fail' ? '#f00' : '', cursor: status === 'fail' ? 'pointer' : 'default'}} 
                onClick={() => {
                    if (status === 'fail') {
                        tryAgain();
                    }
                }
            }>
                {
                    status === 'success' ? '' : 
                    status === 'loading' ? <LoadingOutlined /> :
                    status === 'fail' ? <ExclamationCircleOutlined /> : ''
                }
            </div> 
        </>
    )
}


function mapStateToProps(state) {
    return {
        user: state.user,
        currentRoom: state.currentRoom
    }
}
export default connect(
    mapStateToProps,
    {

    }
)(NormalMessage);

